<template>
	<dt-main-body v-model="labelPosition">
		<div class="location">
			<el-breadcrumb separator-class="el-icon-arrow-right">
				<el-breadcrumb-item>
					<i class="iconfont icon-home"></i>
					管理中心
				</el-breadcrumb-item>
				<el-breadcrumb-item>商品管理</el-breadcrumb-item>
				<el-breadcrumb-item>编辑模型</el-breadcrumb-item>
			</el-breadcrumb>
		</div>

		<div class="content-box">
			<el-form ref="editForm" :model="model" :rules="rules" :label-position="labelPosition" label-width="120px">
				<el-tabs v-model="activeName" type="card">
					<el-tab-pane label="基本信息" name="info">
						<div class="tab-content">
							<el-form-item prop="title" label="模型名称">
								<el-input v-model="model.title" placeholder="任意字符，128个字符内"></el-input>
							</el-form-item>
							<el-form-item label="扩展属性">
								<el-button type="primary" size="small" icon="el-icon-plus"@click="addRow">添加</el-button>
								<el-button type="danger" size="small" icon="el-icon-delete"@click="removeRow">删除</el-button>
							</el-form-item>
							<el-form-item>
								<el-card class="table-card">
									<el-table ref="fieldTable" :data="model.options" class="table-list"@selection-change="handleSelectionChange">
										<el-table-column type="selection" width="45"></el-table-column>
										<el-table-column width="110" label="选项类型">
											<template slot-scope="scope">
												<el-form-item :prop="'options.' + scope.$index + '.controlType'" :rules='rules.field.controlType' style="margin:auto">
													<el-select size="small" v-model="scope.row.controlType" placeholder="请选择...">
														<el-option label="单选框" value="Radio"></el-option>
														<el-option label="复选框" value="CheckBox"></el-option>
														<el-option label="下拉框" value="Select"></el-option>
														<el-option label="输入框" value="Input"></el-option>
													</el-select>
												</el-form-item>
											</template>
										</el-table-column>
										<el-table-column min-width="120" label="属性名">
											<template slot-scope="scope">
												<el-form-item :prop="'options.' + scope.$index + '.name'" :rules='rules.field.name' style="margin:auto">
													<el-input size="small" v-model="scope.row.name" placeholder="必填，任何字符"></el-input>
												</el-form-item>
											</template>
										</el-table-column>
										<el-table-column min-width="160" label="选项列表">
											<template slot-scope="scope">
												<el-form-item :prop="'options.' + scope.$index + '.itemOption'" :rules='rules.field.itemOption' style="margin:auto">
													<el-input size="small" v-model="scope.row.itemOption" placeholder="必填，以逗号分隔开"></el-input>
												</el-form-item>
											</template>
										</el-table-column>
										<el-table-column fixed="right" width="60" label="操作" align="center">
											<template slot-scope="scope">
												<el-link :underline="false" icon="el-icon-delete" @click="removeRow(scope.$index)"></el-link>
											</template>
										</el-table-column>
									</el-table>
								</el-card>
							</el-form-item>
						</div>
					</el-tab-pane>
				</el-tabs>
			</el-form>
		</div>
		
		<div class="footer-box">
			<div class="footer-btn">
				<el-button type="primary" :loading="loading" @click="submitForm">确认保存</el-button>
				<el-button plain @click="$common.back()">返回上一页</el-button>
			</div>
		</div>
	</dt-main-body>
</template>

<script>
	export default {
		props: {
			id: 0
		},
		data() {
			return {
				activeName: 'info', //当前选项卡
				labelPosition: 'right', //表单对齐方式
				loading: false,
				multipleSelection: [],
				model: {
					id: 0,
					merchantId: 0,
					title: null,
					addBy: null,
					addTime: null,
					options: []
				},
				rules: {
					title: [
						{ required: true, message: '请输入模型名称', trigger: 'blur' },
						{ min: 2, max: 128, message: '长度在 2 到 128 个字符', trigger: 'blur' }
					],
					field: {
						name: [
							{ required: true, message: '请输入扩展属性名', trigger: 'blur' },
							{ min: 1, max: 128, message: '长度在 2 到 128 个字符', trigger: 'blur' }
						],
						cntrolType: [
							{ required: true, message: '请选择扩展类型', trigger: 'change' }
						],
						itemOption: [
							{ required: true, message: '请填写选项数据', trigger: 'blur' }
						]
					}
				}
			}
		},
		methods: {
			//初始化数据
			initData() {
				let _this = this; //当前页面
				if (_this.id) {
					_this.$api.request({
						url: '/merchant/shop/field/' + _this.id,
						loading: true,
						success(res) {
							//赋值给model
							Object.keys(_this.model).forEach(key => { _this.model[key] = res.data[key] });
						}
					});
				}
			},
			//提交表单
			submitForm() {
				let _this = this; //当前页面
				//多个表单验证
				const f1 = new Promise((resolve, reject) => {
					_this.$refs['editForm'].validate((valid) => {
						if (valid) resolve()
					});
				});
				Promise.all([f1]).then(() => {
					//提交表单,Id大于0则修改，否则添加
					if (_this.model.id > 0) {
						_this.$api.request({
							method: 'put',
							url: '/merchant/shop/field/' + _this.model.id,
							data: _this.model,
							successMsg: '修改模型已成功',
							beforeSend() {
								_this.loading = true
							},
							success(res) {
								//可跳转加列表页
								_this.$common.linkUrl('/shop/field/list');
							},
							complete() {
								_this.loading = false
							}
						});
					} else {
						_this.$api.request({
							method: 'post',
							url: '/merchant/shop/field',
							data: _this.model,
							successMsg: '新增模型已成功',
							beforeSend() {
								_this.loading = true
							},
							success(res) {
								//重置表单
								_this.$refs['editForm'].resetFields();
							},
							complete() {
								_this.loading = false
							}
						});
					}
				})
			},
			removeRow(index) {
				let _this = this; //当前页面
				if (typeof(index)=='number') {
					_this.model.options.splice(index, 1);
				} else {
					let list = _this.multipleSelection; //拿到选中的数据
					if (list.length>0) {
						list.forEach((item, index) => {
							//遍历源数据
							_this.model.options.forEach((v, i) => {
								//如果选中数据和源数据的某一条唯一标识符相等，删除对应的源数据
								if (item == v) {
									_this.model.options.splice(i, 1);
								}
							})
						});
					}
					//清除选中状态
					_this.$refs.fieldTable.clearSelection();
				}
			},
			addRow() {
				this.model.options.push({
					id: 0,
					fieldId: 0,
					name: '',
					controlType: null,
					itemOption: null
				});
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
		},
		created() {
			this.initData();
		}
	}
</script>